<template>
  <!-- 用户管理-->
  <div>
    <div class="topView">
      <el-form>
        <el-button size="small" class="addBtn" @click="addClickfunc"
          >添加</el-button
        >
      </el-form>
    </div>

    <!-- 表格内容 -->
    <div class="bgView">
      <el-table :data="tableData" border max-height="700px" style="width: 100%">
        <el-table-column
          prop="user"
          label="用户名"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="tel"
          label="手机号"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="roleName"
          label="角色名称"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="loginNum"
          label="登录次数"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="Operator"
          label="操作人"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="addTime"
          label="添加时间"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="lastLoginTime"
          label="最后一次登录时间"
          align="center"
        ></el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="210px"
          align="center"
        >
          <template v-slot="scope">
            <el-button
              @click="editClick(scope.row, scope.$index)"
              size="mini"
              style="background: rgb(41, 59, 105); color: white"
              >编辑
            </el-button>
            <el-button
              @click="delegateClick(scope.row, scope.$index)"
              size="mini"
              style="background: rgb(190, 15, 1); color: white"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      width="50%"
      title="用户编辑"
      :visible.sync="editdialogClick"
      align="center"
    >
      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: -20px;
          margin-bottom: 20px;
        "
      ></div>

      <el-form :label-width="formLabelWidth">
        <el-form-item label="用户名:" align="center">
          <el-input placeholder="请输入用户名、拼音/数字/字母"></el-input>
        </el-form-item>

        <el-form-item label="手机号码:" align="center">
          <el-input placeholder="手机号/登录使用"></el-input>
        </el-form-item>

        <el-form-item label="用户密码:" align="center">
          <el-input placeholder="请输入登录密码"></el-input>
        </el-form-item>

        <el-form-item label="确认密码:" align="center">
          <el-input placeholder="请再次输入密码"></el-input>
        </el-form-item>

        <el-form-item label="用户角色:" align="center">
          <el-select
            v-model="roleCheck"
            placeholder="选择角色"
            style="width: 70%; margin-left: -150px"
          >
            <el-option label="一级" value="baihuo"></el-option>
            <el-option label="二级" value="fuzhuabg"></el-option>
            <el-option label="三级" value="meizhuabg"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: 20px;
          margin-bottom: 20px;
        "
      ></div>
      <el-row align="right">
        <el-button
          @click="cancelClick()"
          size="mini"
          style="background: rgb(41, 59, 105); color: white"
          >取消
        </el-button>
        <el-button
          @click="confirmClick()"
          size="mini"
          style="background: rgb(41, 59, 105); color: white"
          >确定
        </el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "userManage",
  data() {
    return {
      tableData: [
        {
          user: "用户名",
          tel: "手机号",
          roleName: "角色名称",
          loginNum: "登录次数",
          Operator: "操作人",
          addTime: "添加时间",
          lastLoginTime: "最后一次登录时间",
        },
      ],
      editdialogClick: false,
      formLabelWidth: "220px",

      roleCheck: "", //选择角色
    };
  },
  computed: {},

  methods: {
    //添加
    addClickfunc() {
      console.log("添加");
      this.editdialogClick = true;
    },
    //编辑
    editClick(row, index) {
      console.log(row, index);
    },
    //删除
    delegateClick(row, index) {
      console.log(row, index);
    },

    cancelClick() {
      console.log("取消");
      this.editdialogClick = false;
    },
    confirmClick() {
      console.log("确定");
    },
  },
};
</script>

<style scoped>
.topView {
  border: 1px solid rgb(228, 228, 288);
  background-color: white;
  width: 98%;
  height: 30px;
  padding: 20px;
}
.addBtn {
  margin-left: 10px;
  background: rgb(68, 98, 170);
  color: white;
}
.bgView {
  margin-top: 20px;
}
.el-input {
  width: 70%;
  margin-left: -150px;
}
</style>
